<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原文与批注连接</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="main-text">
            <p id="text1">在文学的长河中，诗歌犹如璀璨的星辰，照亮了人类的精神夜空。</p>
            <p id="text2">它以简洁而富有韵律的语言，传达着深刻的情感和思想。</p>
            <p id="text3">无论是李白的豪放飘逸，杜甫的沉郁顿挫，还是苏轼的豁达超脱，都展现了诗歌的无穷魅力。</p>
            <p id="text4">诗歌不仅是文字的艺术，更是心灵回响，让我们在阅读中找到共鸣和慰藉。</p>
        </div>
        <div class="annotations">
            <div class="annotation" data-target="text1" onclick="highlightText(this)">
                <p>此句运用比喻的手法，将诗歌比作星辰，生动形象地体现了诗歌在文学中的重要地位。</p>
            </div>
            <div class="annotation" data-target="text2" onclick="highlightText(this)">
                <p>强调了诗歌语言的特点及其表达功能，简洁却蕴含深意。</p>
            </div>
            <div class="annotation" data-target="text3" onclick="highlightText(this)">
                <p>列举了三位著名诗人的风格，展现了诗歌风格的多样性。</p>
            </div>
            <div class="annotation" data-target="text4" onclick="highlightText(this)">
                <p>指出诗歌的价值不仅在于艺术层面，更能触动心灵，给人带来情感上的满足。</p>
            </div>
        </div>
    </div>
    <canvas id="connectorCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>